<template>
  <div class="page">
    <div class="hei20"></div>
    <mt-field label=""
              readonly
              class="searchTop"
              placeholder="网格"
              v-model="searchWords"
              v-lfcous='handleCommonSelect'></mt-field>
    <div class="container">
      <div class="tableList">
        <vTable :tableColumns='columns'
                :tableData='tableData'
                v-on:handleRowclick='handleCheckSingle'></vTable>
      </div>
      <div class="hei20"></div>
      <!-- <mt-button type="primary"
                 class="moreBtn"
                 size='small'
                 icon="more"
                 @click="hanldleLoadMore">加载更多</mt-button> -->
      <div class="pubWrapper"
           @click="handleCollection">
        <img class="pub-icon"
             src="@/assets/images/pub-icon.png"
             alt="" />
        <p>去采集</p>
      </div>
      <fadeRight v-show='dialogShow'>
        <div class="dialog"
             key="ke">
          <div class="dialog-title">单元采集</div>
          <span class="close-btn"
                @click="close">
            <img width="20px"
                 height="20px"
                 src="@/assets/images/close-icon.png" />
          </span>
          <div class="dialog-content">
            <mt-field label="楼栋名称"
                      class="require"
                      placeholder="填写楼栋名称"
                      readonly
                      v-model="formData.buildingName"></mt-field>
            <mt-field label="单元编号"
                      class="require"
                      placeholder="单元编号"
                      readonly
                      v-model="formData.unitName"></mt-field>
            <mt-field label="单元长"
                      placeholder="单元长"
                      v-model="formData.unitManagerName"></mt-field>
            <mt-field label="联系电话"
                      placeholder="联系电话"
                      v-model="formData.unitManagerPhone"></mt-field>
            <mt-field label="身份证号"
                      placeholder="身份证号"
                      v-model="formData.unitManagerIdentity"></mt-field>
            <div class="hei20"></div>
             <mt-button v-if='show' type="primary"
                       class="isDisplay"
                       @click="save">提交</mt-button>
            <div class="hei40"></div>
          </div>
        </div>
      </fadeRight>
    </div>
    <v-select :show='selectStreetShow'
              v-on:callbackData='callbackDataStreet'
              v-on:closeBackData='closeBackData'
              :defaultData='defaultDataStreet'
              :pickData='selectDataStreet'></v-select>
    <v-select :show='selectRquartersShow'
              v-on:callbackData='callbackDataRquarters'
              v-on:closeBackData='closeBackData'
              :defaultData='defaultDataStreet'
              :pickData='selectDataRquarters'></v-select>
    <v-select :show='selectGridShow'
              v-on:callbackData='callbackDataGrid'
              v-on:closeBackData='closeBackData'
              :defaultData='defaultDataStreet'
              :pickData='selectDataGrid'></v-select>
    <v-select :show='selectShow'
              v-on:callbackData='callbackData'
              v-on:closeBackData='closeBackData'
              :defaultData='defaultData'
              :pickData='selectData'></v-select>
  </div>
</template>
<script>
import Vue from 'vue'
import { Button, Field, MessageBox } from 'mint-ui'
import vSelect from '@/components/vSelect'
import vTable from '@/components/vTable'
import fadeRight from '@/components/fadeRight'
import tableDo from '@/components/tableDo'
import { findGridTree, getBuilding, updateUnit, createUnit, findUnitList, findBuilding } from '@/assets/js/ApiUtil'
Vue.component(Button.name, Button)
Vue.component(Field.name, Field)
Vue.component(MessageBox.name, MessageBox)
Vue.component('table-do', tableDo)


let page = 0
export default {
  name: 'Community',
  data () {
    return {
      pageData: {},
      title: '小区采集',
      defaultImg: require('@/assets/images/upbtn.png'),
      parentId: '',
      queryData: {},
      dialogShow: false,
      selectShow: false,
      searchWords: '',
      selectStreetShow: false,
      selectRquartersShow: false,
      selectGridShow: false,
      show:true,
      formData: {},
      tableData: [],
      columns: [
        { field: 'buildingName', title: '楼栋名称', width: 80, titleAlign: 'center', columnAlign: 'center', isResize: true, titleCellClassName: 'tcellName' },
        { field: 'unitName', title: '单元编号', width: 80, titleAlign: 'center', columnAlign: 'center', isResize: true, titleCellClassName: 'tcellName' },
        { field: 'unitManagerName', title: '单元长', width: 80, titleAlign: 'center', columnAlign: 'center', isResize: true, titleCellClassName: 'tcellName' },
        { field: 'funDo', title: '操作', width: 80, titleAlign: 'center', columnAlign: 'center', isResize: true, componentName: 'table-do', titleCellClassName: 'tcellName' }
      ],
      defaultDataStreet: [
        { d: 0, name: '加载中....' }
      ],
      defaultData: [
        { d: 0, name: '加载中....' }
      ],
      selectDataStreet: { data1: [{ id: 0, name: '加载中...' }] },
      selectDataRquarters: { data1: [{ id: 0, name: '加载中...' }] },
      selectDataGrid: { data1: [{ id: 0, name: '加载中...' }] },
      selectData: { data1: [{ id: 0, name: '加载中...' }] }
    }
  },
  components: {
    vSelect,
    vTable,
    Button,
    Field,
    fadeRight,
    tableDo
  },
  mounted () {
    this.queryData = {}
    this.queryData.buildingId = this.getQueryVariable('buildingId')
    this.getTableData()
    this.getOptions()
    this.getBuildingName(this.queryData.buildingId)
  },
  methods: {
    getQueryVariable (variable) {
      var query = window.location.search.substring(1);
      var vars = query.split("&");
      for (var i = 0; i < vars.length ; i++) {
          var pair = vars[i].split("=");
          if(pair[0] === variable){
            return pair[1]
          }
      }
    },
    save () {
      if (this.formData) {
        if (!this.validate(this.formData)) {
          return false
        }
        if (this.formData.id) {
          updateUnit(this.formData).then(resp => {
            if (resp.code && resp.code === '200') {
              MessageBox({title: '提示',
                message: '修改成功',
                showCancelButton: false}).then(action => {
                this.getTableData()
                this.close()
              })
            }
          })
        } else {
          createUnit(this.formData).then(resp => {
            if (resp.code && resp.code === '200') {
              MessageBox({title: '提示',
                message: '添加成功',
                showCancelButton: false}).then(action => {
                this.getTableData()
                this.close()
              })
            }
          })
        }
      }
    },
    validate (formData) {
      if (!formData.buildingName) {
        MessageBox('提示', '请填写楼栋名称')
        return false
      } else if (!formData.unitName) {
        MessageBox('提示', '请填写单元')
        return false
      } else if (!formData.unitManagerName) {
        MessageBox('提示', '请填单元长')
        return false
      } else if (!formData.unitManagerPhone) {
        MessageBox('提示', '请填写单元长电话')
        return false
      } else if (!formData.unitManagerIdentity) {
        MessageBox('提示', '请填写单元长身份证')
        return false
      } else {
        return true
      }
    },
    getTableData () {
      let param = this.queryData
      findUnitList(param).then(resp => {
        if (resp.code && resp.code === '200') {
          let data = resp.data
          if (data) {
            this.pageData = data
            if (this.pageData && this.pageData instanceof Array) {
              if (param.hasOwnProperty('offset')) {
                this.tableData = this.tableData.concat(this.pageData)
              } else {
                this.tableData = this.pageData
              }
              findBuilding().then(resp => {
                if (resp.code && resp.code === '200') {
                  let data = resp.data
                  if (data) {
                    if (data.items && data.items instanceof Array) {
                      let buildingArr = data.items
                      for (let i = 0; i < this.tableData.length; i++) {
                        for (let j = 0; j < buildingArr.length; j++) {
                          if (this.tableData[i].buildingId === buildingArr[j].id) {
                            this.$set(this.tableData[i], 'buildingName', buildingArr[j].buildingName)
                          }
                        }
                      }
                    }
                  }
                }
              })             
            }
          }
        }
      })
    },
    getOptions () {
      findGridTree().then(resp => {
        if (resp.code && resp.code === '200') {
          let data = resp.data
          if (data && data instanceof Array) {
            let newData = JSON.parse(JSON.stringify(data[0].children))
            newData.unshift({ 'name': '全部', 'id': -1 })
            this.parentId = data[0].id
            this.selectDataStreet = { data1: data[0].children }
            this.selectData = { data1: newData }
            return false
          }
        }
      })
    },
    getBuildingName (id) {
      getBuilding(id).then(resp => {
        if (resp.code && resp.code === '200') {
          let data = resp.data
          if (data) {
            this.$set(this.formData, 'buildingName', data.buildingName)
            this.$set(this.formData, 'buildingId', data.id)
          }
        }
      })
    },
    handleCollection () {
      this.dialogShow = true
      this.getBuildingName (this.queryData.buildingId)
      this.formData.unitName = this.buildUnitName()
      this.show = true
    },
    buildUnitName () {
      if (this.tableData && this.tableData instanceof Array) {
        let unitSize = this.tableData.length
        let unitName = (unitSize + 1) + '单元'
        return unitName
      }
    },
    close () {
      this.dialogShow = false
      this.formData = {}
    },
    handleCheckSingle (data) {
      this.dialogShow = true
      this.formData = data.items
      this.show = false
    },
    handleSelectStreet () { // 街道下拉显示
      this.selectStreetShow = true
    },
    handleSelectRquarters () { // 社区下拉显示
      this.selectRquartersShow = true
    },
    handleSelectGrid () { // 网格下拉显示
      this.selectGridShow = true
    },
    callbackDataStreet (data) { // 社区街道回调
      this.selectStreetShow = false
      this.selectDataRquarters = { data1: data.items.select1.children }
      this.formData.allGridId = ''
      this.formData.street = data.defaultData[0].name
      this.formData.streetId = data.defaultData[0].id
      this.formData.allGridId = this.parentId + ',' + this.formData.streetId
      if (data.defaultData[0].name === '加载中...') this.formData.street = ''
    },
    callbackDataRquarters (data) { // 社区回调
      this.selectRquartersShow = false
      this.selectDataGrid = { data1: data.items.select1.children }
      this.formData.rquartersId = data.defaultData[0].id
      this.formData.rquarters = data.defaultData[0].name
      this.formData.allGridId = this.parentId + ',' + this.formData.streetId + ',' + this.formData.rquartersId
      if (data.defaultData[0].name === '加载中...') this.formData.rquarters = ''
    },
    callbackDataGrid (data) { // 网格回调
      this.selectGridShow = false
      this.formData.gridId = data.defaultData[0].id
      this.formData.allGridId = this.parentId + ',' + this.formData.streetId + ',' + this.formData.rquartersId + ',' + this.formData.gridId
      this.formData.grid = data.defaultData[0].name
      if (data.defaultData[0].name === '加载中...') this.formData.grid = ''
    },
    closeBackData () { // 关闭事件
      this.selectStreetShow = false
      this.selectRquartersShow = false
      this.selectGridShow = false
      this.selectShow = false
    },
    handleCommonSelect () { // 通用显示事件
      this.selectShow = true
    },
    callbackData (data) {
      this.selectShow = false
      this.defaultData = data.defaultData
      this.searchWords = data.defaultData[0].name
      this.queryData = {}
      if (data.defaultData[0].id !== -1) this.queryData.likeAllGridId = data.defaultData[0].id
      if (data.defaultData[0].name === '加载中...') this.searchkey = ''
      this.getTableData()
    },
    handleClickImg () {
      // app.getLocation()
    },
    handleCoordinateClick () {
      // app.getLocation()
    },
    getLocationByPoint () {
      // let blongitude = this.formData.longitude
      // let blatitude = this.formData.latitude
      // app.getLocationByPoint('', blongitude, blatitude)
    },
    hanldleLoadMore () {
      page = page + 10
      this.queryData.offset = page
      this.getTableData()
    }
  }
}
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.page {
  background: #f5f5f5;
  width: 100%;
  height: 100%;
  overflow: auto
}
.container {
  position: relative;
  z-index: 10;
  padding: 10px 10px;
}
.tableList >>> .tcellName {
  color: #fff;
}
.tableList >>> .tcellName .vertical-border {
  color: #fff;
}
.tableList >>> .vertical-border {
  border-right: none !important;
  font-size: 14px;
  color: #858585;
}
.v-table-rightview {
  right: -1px; /*覆盖原有样式，解决表头最右侧有1px的间隙 */
}
.v-table-class {
  z-index: 10;
}
.tableList >>> .v-table-views {
  border-left: none;
  border-right: none;
}
.moreBtn {
  width: 100%;
}
.m-btn {
  text-align: center;
  font-size: 0;
}
.m-btn .mint-button {
  width: 48%;
}
.pubWrapper {
  position: fixed;
  right: 10px;
  top: 30%;
  z-index: 11;
  text-align: center;
}
.pub-icon {
  width: 30px;
  height: 30px;
}
.pubWrapper p {
  font-size: 12px;
  color: #26a2ff;
  padding: 0;
  margin: 0;
}
.searchTop {
  background: none;
}
.searchTop >>> input {
  background: none;
}
.dialog {
  position: fixed;
  left: 0;
  right: 0;
  top: 0px;
  bottom: 0;
  z-index: 15;
  overflow: auto;
}
.close-btn {
  position: absolute;
  right: 10px;
  top: 13px;
}
.subBtn {
  display: block;
  width: calc(100% - 20px);
  margin: 0px auto;
}
.dialog {
  background: #fff;
}
.dialog-title {
  height: 45px;
  text-align: center;
  line-height: 45px;
  font-size: 16px;
  color: #333;
  border-bottom: 1px solid #d9d9d9;
}
.mint-field >>> .mint-field-core {
  font-family: "微软雅黑";
}
.dialog-content {
  padding: 0 10px;
}
.mint-field >>> .mint-cell-wrapper {
  border-bottom: 1px solid #d9d9d9;
  background-image: none;
}
.upsrc {
  width: 140px;
  height: 140px;
  margin: 10px;
  display: flex;
  justify-content: center;
  align-items: Center;
  border: 1px solid #d9d9d9;
  border-radius: 3px;
}
.isDisplay {
  width: 100%;
}
</style>
